<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input
         :disabled="userState"
          v-model="plateNum"
          placeholder="车牌号"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="queryBtn"
        />
        <el-button
         :disabled="userState"
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 5px"
          @click="queryBtn"
        >
          查询
        </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
          添加
        </el-button>
     
    
      <span style="float: right;
      margin-right: 20px;
      font-weight: 600;color: #494949;">当前账号：<span style="color: #ff770f;">{{title}}</span></span>
    
    </div>
  
      
  
      <el-table
        :header-cell-style="{ background: '#ffffff', color: '#000000' }"
        :key="tableKey"
        :row-class-name="tableRowClassName"
        v-loading="listLoading"
        :data="list"
        :row-key="'id'"
        :stripe=true
        ref="parkfieldTable"
        @selection-change="handleTableChange"
        border
        fit
        highlight-current-row
        style="
          width: 100%;
          font-size: 15px;
          box-shadow: 1px 1px 8px #cdcdcd;
          border: 0px;
        "
        :default-sort="{ prop: 'time', order: 'descending' }"
      >
        <el-table-column
          label="ID"
          prop="id"
          sortable="custom"
          align="center"
          width="80"
          :class-name="getSortClass('id')"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="车牌号" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.plateNum }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="车牌颜色" min-width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.plateColor }}</span>
          </template>
        </el-table-column>
s
        <el-table-column label="停车场" min-width="450px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.parkfields == null || row.parkfields == 'null'"
            size="medium"
            type="Info"
            style="font-size: 14px"
            >全部</el-tag
          >
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.parkfields.replace(/,/g,';  ')
          }}</el-tag>
 
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.plateStatus == 0"
            size="medium"
            type="info"
            effect="dark"
            style="font-size: 14px"
            >无效</el-tag
          >
          <el-tag
            v-else-if="row.plateStatus == 1"
            size="medium"
            type="primary"
            effect="dark"
            style="font-size: 14px"
            >有效</el-tag>
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.plateStatus
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="类型" min-width="100px">
        <template slot-scope="{ row }">
          <el-tag
            v-if="row.type == 0"
            size="medium"
            type="success"
            effect="dark"
            style="font-size: 14px"
            >直流配套</el-tag
          >
          <el-tag
            v-else-if="row.type == 1"
            size="medium"
            type="warning"
            effect="dark"
            style="font-size: 14px"
            >车位控制</el-tag>
          <el-tag v-else size="medium" type="Info" style="font-size: 14px">{{
            row.type
          }}</el-tag>
        </template>
      </el-table-column>
 
  
        <el-table-column label="创建时间" min-width="160px">
          <template slot-scope="scope">
            <span>{{ sub(scope.row.createDate) }}</span>
          </template>
        </el-table-column>

        <el-table-column
        label="操作"
        align="center"
        width="200"
        class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            <i class="el-icon-edit"></i>
            删除
          </el-button>
        </template>
      </el-table-column>

  
      </el-table>
  
      <el-row>
        <el-col :span="24" class="page-tool">
          <el-pagination
            layout="total,sizes,prev, pager,next,jumper"
            style="margin-top: 10px"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handlePageChange"
            @current-change="handleNoChange"
          ></el-pagination>
        </el-col>
      </el-row>
  
   <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :width="'722px'">
        <el-form :model="form" ref="form">
          <el-form-item label="车牌号" :label-width="labelWidth" required>
            <template>
              <el-col :span="8">
                <el-form-item prop="dayFree">
                 <el-input v-model="plateNum">

                 </el-input>
                </el-form-item>
              </el-col>
             
            </template>
          </el-form-item>

          <el-form-item label="停车场" :label-width="labelWidth" required>
            <template>
              <el-col :span="18">

                <el-select @change="totalParkfield" style="width:500px" v-model="form.parkfieldId" filterable multiple placeholder="请选择">
                  <el-option :key="key" label="全部" :value="key"></el-option>
                  <el-option
                    v-for="parkfield in parkfieldList"
                    :key="parkfield.id"
                    :label="parkfield.name"
                    :value="parkfield.id">
                  </el-option>
                </el-select>
<!-- 
                <el-select style="width:400px" v-model="form.parkfieldId" filterable clearable placeholder="请选择停车场">
                <el-option key="''" label="全部" :value="''"></el-option>
                <el-option v-for="parkfield in parkfieldList" v-bind:key="parkfield.id" :label="parkfield.name" :value="parkfield.id"></el-option>
                </el-select> -->

              </el-col>
             
            </template>
          </el-form-item>

          <!-- <el-form-item  label="运营商" :label-width="labelWidth" required>
            <template>
              <el-col :span="18">

                <el-select @change="totalParkfield2" style="width:500px" v-model="form.manager" filterable placeholder="请选择">
            
                  <el-option
                    v-for="manager in managerList"
                    :key="manager.id"
                    :label="manager.nickName"
                    :value="manager.roleCode">
                  </el-option>
                </el-select>

              </el-col>
             
            </template>
          </el-form-item> -->


          <el-form-item label="类型" :label-width="labelWidth" required>
            <template>
              <el-col :span="18">
                <el-form-item prop="">
                  <el-radio v-model="type" label="1">直流配套</el-radio>
                  <el-radio v-model="type" label="2">车位控制</el-radio>
                </el-form-item>
              </el-col>
             
            </template>
          </el-form-item>

          <el-form-item label="车牌颜色" :label-width="labelWidth" required>
            <template>
              <el-col :span="24">
                <el-form-item prop="">
                  <el-radio v-model="plateColor" label="蓝色">蓝色</el-radio>
                  <el-radio v-model="plateColor" label="绿色">绿色</el-radio>
                  <el-radio v-model="plateColor" label="蓝绿色">蓝绿色</el-radio>
                  <el-radio v-model="plateColor" label="白色">白色</el-radio>
                  <el-radio v-model="plateColor" label="黑色">黑色</el-radio>
                  <el-radio v-model="plateColor" label="黄色">黄色</el-radio>
                </el-form-item>
              </el-col>
             
            </template>
          </el-form-item>

        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateParkfield()">添加</el-button>
        </div>
      </el-dialog>
  
      
    </div>
  </template>
  
  <style>
  
  .page-tool {
    background: rgb(237, 231, 231);
  }
  
  .page-tool div {
    text-align: right;
  }
  
  .lock-btn {
    margin-bottom: 5px;
    margin-top: -10px;
  }
  .operateBtn {
    font-size: 18px;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .el-table .warning-row {
    background: #fff5ee;
  }
  .el-table__body tr:hover > td {
    background-color: #fdc091;
  }
  .el-table__body tr.current-row > td {
    background-color: #fdc091;
  }
  </style>
  
  
  <script>

  import waves from "@/directive/waves"; // waves directive
  import { lcplateparkfieldApi,lcplateparkfieldPostApi,whiteDeleteApi} from "@/api/lcplateparkfield";
  import { loadParkfieldsApi,loadManagerApi} from "@/api/loadParkfields";
  import { getNickName, getTestUserName } from "../../utils/auth";

  
  export default {
    name: "ComplexTable",
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    queryParams: {
      name: "",
    },
    
    data() {
      return {
        queryParams: {
          name: "",
        },
        rules: {
          dayFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ],
          nightFree: [
              { required: true, message: '请选择占位收费时间', trigger: 'change' }
            ]      
        },
        
        roleIndex: true,
        dialogTitle: "添加白名单",
        addDialog: false,
        type:'1',
        plateColor:'绿色',
        addDialog2: false,
        labelWidth: "120px",
        form: {},
        plateNum:'',
        hours: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
        roleIndex: true,
        multipleSelection: [],
        tableKey: 0,
        list: [],
        parkfieldList: [],
        total: 0,
        promotionDialogTitle: "",
        promotionDialog: false,
        editFeeDialog: false,
        feeForm: {
          freeTime: 0,
          occupiedFee: "",
          electricFee: "",
          oriFee: "",
          serviceFee: "",
          startTime1: "",
          endTime1: "",
          electricFee1: "",
          startTime2: "",
          endTime2: "",
          electricFee2: "",
          startTime3: "",
          endTime3: "",
          electricFee3: "",
          startTime4: "",
          endTime4: "",
          electricFee4: ""
        },
        timeSharing: false,
        //  sortable:true,
        currentPage: 1,
        title:"",
        pageSizes: [10, 20, 40],
        pageNo: 1,
        pageSize: 20,
        listLoading: true,
        listQuery: {
          pageNo: 1,
          pageSize: 41,
          name: undefined,
          phone: undefined,
          number: undefined,
          sort: "+id",
        },
        form:{
          parkfieldId:'',
          manager:''
        },

        importanceOptions: [1, 2, 3],
        managerList:'',
        showReviewer: false,
        temp: {
          id: undefined,
          importance: 1,
          remark: "",
          timestamp: new Date(),
          title: "",
          type: "",
          status: "published",
        },
        dialogFormVisible: false,
        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "Create",
        },
        searchVal: "", //默认输入为空
        letter: "", //默认不排序
        original: false, //默认从小到大排列
        dialogPvVisible: false,
        pvData: [],
        key:"",
        downloadLoading: false,
      };
    },
  


    mounted: function () {
      this.key = localStorage.getItem("key");
      this.title = localStorage.getItem("title");
      this.loadParkfields()
      // this.loadManager()
      this.$nextTick(function () {
        this.lcplateparkfield(this.pageNo, this.pageSize);
      });
    },
  
    computed: {
      userState () {
        return getNickName() === getTestUserName();
      }
    },
    
  
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 == 0) {
          return "warning-row";
        }
        return "";
      },
      getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
    handleCreate() {
      this.dialogFormVisible = true
      
    },

    updateParkfield(){
    var _this = this;
    if(_this.plateNum == '' || _this.plateNum == null){
      this.$alert('车牌号不能为空', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else if(_this.form.parkfieldId == '' || _this.form.parkfieldId == null){
      this.$alert('停车场不能为空', '提示', {
                confirmButtonText: '关闭',});
       return false
    }else{
    }

 

    let a= _this.form.parkfieldId
    let b=  a.join(',') 
    console.log(b)
    if(this.form.parkfieldId.indexOf(this.key) != -1){
      lcplateparkfieldPostApi({
          pageNo:_this.pageNo,
          pageSize: _this.pageSize,
          plateNum: _this.plateNum,
          type: _this.type - 1,
          roleCode:_this.key,
          plateColor:_this.plateColor
        }).then((resp) => {
          if (resp.errmsg === "ok") {
                _this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success"
                });
                _this.dialogFormVisible = false
              } else {
                _this.$notify({
                  title: "失败",
                  message: "添加失败",
                  type: "error"
                });
              }
        })
        .catch((resp) =>{
          _this.$notify({
                  title: "失败",
                  message: "添加失败",
                  type: "error"
                });
        })
        }else{

          lcplateparkfieldPostApi({
          pageNo:_this.pageNo,
          pageSize: _this.pageSize,
          plateNum: _this.plateNum,
          type: _this.type - 1,
          parkfields:b,
          plateColor:_this.plateColor
        }).then((resp) => {
          if (resp.errmsg === "ok") {
                _this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success"
                });
                
                _this.dialogFormVisible = false
                this.lcplateparkfield(this.pageNo, this.pageSize);
              } else {
                _this.$notify({
                  title: "失败",
                  message: "添加失败",
                  type: "error"
                });
              }
        })
        .catch((resp) =>{
          _this.$notify({
                  title: "失败",
                  message: "添加失败",
                  type: "error"
                });
        })
      }
   
    
    // console.log(_this.form.parkfieldId)
    // console.log(_this.radio)

    },


    handleDelete(row){
      whiteDeleteApi({
          id:row.id,
        }).then((resp) => {
          if (resp.errmsg === "ok") {
      
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success"
                });
                this.lcplateparkfield(this.pageNo, this.pageSize);
              } else {
                this.$alert('删除失败', '删除失败', {
                confirmButtonText: '关闭',});
  
                _this.$notify({
                  title: "失败",
                  message: "删除失败",
                  type: "error"
                });
              }
        })
       
    },


    totalParkfield(e){

    if(this.form.parkfieldId != ''){
      this.form.manager = ''
     }

        if(this.form.parkfieldId.indexOf(this.key) != -1){
      this.form.parkfieldId = [this.key]
        }else{
        }
    },

    totalParkfield2(e){
       
      console.log(e)
    if(this.form.manager != ''){
      this.form.parkfieldId = ''
      console.log("8888888")
     }

    },
  
       timeSharingChange () {
        let _this = this;
    //    console.log(_this.timeSharing)
      },
      sub(value) {
        if (value === null || undefined) {
          return "";
        } else {
          value = value.substring(0, 16);
          return value;
        }
      },
      sortByPurchase(obj1, obj2) {
        var a = obj1.electricFee2;
        var b = obj2.electricFee2;
        return a - b;
      },
   
      loadParkfields () {
      let _this = this
        loadParkfieldsApi({roleCode:_this.key}).then(function (resp) {
          if (resp.errmsg === 'ok') {
            _this.parkfieldList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
    loadManager () {
      let _this = this
        loadManagerApi().then(function (resp) {
          if (resp.errmsg === 'ok') {
            _this.managerList = resp.data.dataList
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
  
      //列表页码的触发事件
      handlePageChange(pageSize) {
        this.pageSize = pageSize;
        this.lcplateparkfield(this.pageNo, this.pageSize);
      },
      handleNoChange(pageNo) {
        this.pageNo = pageNo;
        this.lcplateparkfield(this.pageNo, this.pageSize);
      },
      handleTableChange(val) {
        this.multipleSelection = val;
      },
      lcplateparkfield(pageNo, pageSize) {
        let _this = this;
        _this.loading = true;
        lcplateparkfieldApi({
          pageNo: pageNo,
          pageSize: pageSize,
          roleCode:_this.key,
          
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
      },
      queryBtn() {
        let _this = this;
        _this.loading = true;
        if(_this.plateNum == '' || _this.plateNum == null){
          lcplateparkfieldApi({
          pageNo: _this.pageNo,
          pageSize: _this.pageSize,
          roleCode:_this.key,
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
        }else{
          lcplateparkfieldApi({
          pageNo: _this.pageNo,
          pageSize: _this.pageSize,
          roleCode:_this.key,
          plateNum:_this.plateNum
        }).then((response) => {
          _this.list = response.data.dataList;
          _this.total = response.data.totalNum;
          setTimeout(() => {
            _this.listLoading = false;
          }, 1 * 1000);
        });
        }
       
      },
  
    
  
    }
  

  
  };
  
  
  
  </script>
  
  
  